<template>
	<view>
		<view class="net_assets">
			<text>净资产<uni-icons :type="eyeFilled" size="20" color="#fff" @click="iconClick"></uni-icons></text>
			<view>{{ title }}</view>
			<view>负债： <text>{{ account }}</text> 总资产： <text>{{ manage }}</text> </view>
		</view>
		<view class="my_account">
			<text class="text">我的账户</text>
			<button class="my_account-button"> <uni-icons type="plusempty" /> 添加账户 </button>
		</view>
		<view class="loan_manage">
			<text class="text">借款管理</text>
			<uni-list :border="false">
				<uni-list-item :show-extra-icon="true" :extra-icon="extraIconUp" title="借出" note="应收" rightText="0">
				</uni-list-item>
				<view class="list-spacer"></view>
				<uni-list-item :show-extra-icon="true" :extra-icon="extraIconDown" title="借入" note="应还" rightText="0">
				</uni-list-item>
			</uni-list>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive } from "vue";

	const title = ref("11");
	const account = ref("33");
	const manage = ref("33");
	const eyeFilled= ref("eye-filled");  // eye-slash-filled
	const extraIconUp = reactive({
		color: '#4cd964',
		size: '22',
		type: 'arrow-up'
	})
	const extraIconDown = reactive({
		color: '#4cd964',
		size: '22',
		type: 'arrow-down'
	})

	const iconClick = () => {
		eyeFilled.value = eyeFilled.value == "eye-filled" ? "eye-slash-filled" : "eye-filled";
		title.value = title.value != "***" ? "***" : "11";
		account.value = account.value != "***" ? "***" : "11";
		manage.value = manage.value != "***" ? "***" : "11";
	}
</script>

<style lang="scss" scoped>
	.net_assets {
		height: 200rpx;
		background-color: #5cb27b;
	}

	.my_account {
		padding: 10px;

		.my_account-button {
			font-size: 26rpx;
			font-weight: bold;
			color: #5cb27b;
			background-color: #fff;
		}

		.uniui-plusempty:before {
			color: #5cb27b;
		}

		uni-button:after {
			border: none;
			border-radius: 0;
		}
	}

	.loan_manage {
		padding: 0 10px;

		::v-deep .uniui-arrow-up:before,
		::v-deep .uniui-arrow-down:before {
			color: #fff;
			background-color: #666;
			padding: 2px;
			border-radius: 50%;
		}

		.receivable,
		.return {
			position: absolute;
			left: 10px;
			bottom: 5px;
			font-size: 14px;
		}

		.list-spacer {
			height: 10px;
			background-color: #f8f8f8;
		}

		.uni-list--border:after {
			height: 0px;
		}
	}

	.text {
		display: inline-block;
		font-size: 28rpx;
		margin-bottom: 10px;
	}
</style>